<template>
	<view class="check-in-page">
		<!-- 白色盒子 -->
		<view class="check-in-box">
			<!-- 刷新按钮 -->
			<view class="refresh-button" @click="refresh">
				<i class="iconfont icon-shuaxin" style="color: #0e70f0;"></i>
				<!-- 这里可以放图片 -->
			</view>

			<!-- 圆形打卡按钮 -->
			<view class="check-in-button" :style="{ transform: isPressed ? 'scale(0.9)' : 'scale(1)' }"
				@touchstart="handleTouchStart" @touchend="handleTouchEnd" @click="checkIn">
				<text class="button-text">打卡</text>
				<text class="button-text">{{ currentTime }}</text>
			</view>

			<!-- 打卡地点文字 -->
			<view class="location-container">
				<i v-show="isCheck" class="iconfont icon-dakachenggong daka"></i>
				<text
					class="location-text">{{ inScope ? '已经入打卡范围' : '未进入打卡范围' }}：{{ address == '' ? '定位中...' : address }}</text>
			</view>
			<!-- <view>
				经度：{{longitude}}
				纬度：{{latitude}}
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		isCheckIn,
		record
	} from '../../utils/back';
	export default {
		data() {
			return {
				name: 'APP获取当前位置信息-----高德地图',
				longitude: '',
				latitude: '',
				checkinLatitude: 31.759110, // 签到地点纬度
				checkinLongitude: 116.478273, // 签到地点经度
				checkinDistance2: 0.000000179321,
				address: '',
				locationaddress: '',
				currentTime: '', // 当前时间
				isPressed: false, // 按钮是否被按下
				inScope: false,
				isCheck: false,
			};
		},
		async onLoad() {
			//查询当前学生今日是否打卡
			this.isCheck = await isCheckIn({
				sid: uni.getStorageSync("id"),
			})
			console.log(this.isCheck);
			this.getTimesInterval();
			this.getTimes();
			this.getlocation();
			if (this.isCheck && !this.inScope) {
				if (await record({
						isHome: false,
						sid: uni.getStorageSync("id")
					})) {
					this.isCheck = false
				}
			}
		},
		beforeDestroy() {
			clearInterval(this.getTimesInterval);
			console.log("计时器关闭");
		},
		methods: {
			// 获取地图定位
			getlocation() {
				const that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					isHighAccuracy: true,
					highAccuracyExpireTime: 10000,
					success: function(res) {
						console.log('获取定位信息', res);
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.address = res.address.province + res.address.city + res.address.street;
						that.isInScope();
					},
					fail: function(err) {
						console.log('获取定位失败', err);
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none',
						});
					},
				});
			},
			// 点击刷新方法
			refresh(e) {
				this.address = 0;
				this.inScope = false
				this.getlocation();
			},
			// 按下按钮
			handleTouchStart() {
				this.isPressed = true;
			},
			// 松开按钮
			handleTouchEnd() {
				this.isPressed = false;
			},
			// 获取当前时间
			getTimes() {
				setInterval(this.getTimesInterval, 1000);
			},
			getTimesInterval() {
				let now = new Date()
				let hours = now.getHours(); //获取当前时间的小时
				let min = now.getMinutes(); //获取当前时间的分数
				let second = now.getSeconds();
				//当小于 10 的是时候，在前面加 0
				//拼接格式化当前时间
				this.currentTime = "" + hours + ":" + (min < 10 ? '0' + min : min)
			},
			isInScope() {
				let left = 116.474459
				let right = 116.47792
				let up = 31.761536
				let bottom = 31.760183
				if (this.longitude > left && this.longitude < right && this.latitude > bottom && this.latitude < up)
					this.inScope = true;
			},
			async checkIn() {
				if (this.isCheck) {
					uni.showToast({
						title: '已打卡',
						icon: 'none',
					});
				} else if (this.inScope) {
					//调用打卡记录方法
					if (await record({
							isHome: true,
							sid: uni.getStorageSync("id")
						})) {
						this.isCheck = true;
						uni.showToast({
							title: '打卡成功',
							icon: 'none',
						});
					} else {
						uni.showToast({
							title: '打卡失败',
							icon: 'none',
						});
					}
				} else
					uni.showToast({
						title: '请到指定位置打卡',
						icon: 'none',
					});
			},
		},
	};
</script>

<style>
	.check-in-page {
		display: flex;
		height: 100vh;
		justify-content: center;
		align-items: center;
		background-color: #f0f0f0;
		/* 背景为灰色 */
		overflow: hidden;
		/* 禁止滚动 */
	}

	.check-in-box {
		width: 90%;
		/* 盒子宽度占页面的 90% */
		height: 90%;
		/* 盒子高度可以根据需要调整 */
		background-color: #ffffff;
		/* 盒子背景为白色 */
		border-radius: 12px;
		/* 圆角 */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		/* 为刷新按钮定位 */
	}

	.refresh-button {
		position: absolute;
		/* 绝对定位 */
		top: 10px;
		/* 距离顶部 10px */
		right: 10px;
		/* 距离右侧 10px */
		width: 40px;
		/* 按钮宽度 */
		height: 40px;
		/* 按钮高度 */
		border-radius: 20px;
		/* 圆形按钮 */
		background-color: #f0f0f0;
		/* 按钮背景颜色 */
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.check-in-button {
		width: 120px;
		/* 圆形按钮的宽度 */
		height: 120px;
		/* 圆形按钮的高度 */
		background: linear-gradient(to bottom, #82b2ff, #0063ce);
		box-shadow: 0px 4px 10px #82b2ff;
		/* 按钮背景为蓝色 */
		border-radius: 60px;
		/* 圆形按钮 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
		/* 按钮与下方文字的间距 */
		position: relative;
		/* 为高光效果定位 */
		overflow: hidden;
		/* 隐藏高光溢出部分 */
	}

	.button-text {
		color: #ffffff;
		/* 按钮文字颜色为白色 */
		font-size: 16px;
		/* 按钮文字大小 */
		line-height: 1.5;
		/* 行高 */
		text-align: center;
	}

	.location-text {
		font-size: 14px;
		/* 打卡地点文字大小 */
		color: #666666;
		/* 打卡地点文字颜色 */
		text-align: center;
	}

	.location-container {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
	}

	.daka {
		text-align: center;
		color: #00ba00;
	}
</style>